<template>
  <div class="basic_wrap">
    <div class="red_top_bg">
      <div
        class="back_left"
        @click="$router.back()"
      />
      <div class="big_tit">
        {{ item.title }}
      </div>
    </div>
    <div class="item_info_bg" />
    <div class="block_div item_info info1">
      <div class="img pos-relative">
        <!-- 2 爆款 3 新品 -->
        <van-tag
          v-if="item.status === 2"
          size="medium"
          class="hot-tag"
          type="warning"
        >
          {{ $t("hot.hotProducts") }}
        </van-tag>
        <van-tag
          v-if="item.status === 3"
          size="medium"
          class="hot-tag"
          type="warning"
        >
          {{ $t("hot.newProduct") }}
        </van-tag>
        <img v-lazy="item.img">
      </div>
      <div class="detail">
        <div class="detail-header">
          <div v-if="item.status === 3">
            <span class="detail_name">{{ $t("hot.startTime") }}</span><span class="detail_num">
              {{ moment(item.start_time).unix().format(startForm) }}
            </span>
          </div>
          <div v-if="item.status === 2">
            <div class="flex_left_center">
              <div class="detail_name">
                {{ $t("hot.distanceEnd") }}
              </div>
              <div>
                <van-count-down
                  :time="item.distanceEnd"
                  :format="countFormat"
                />
              </div>
            </div>
          </div>
        </div>
        <van-cell-group :border="false">
          <van-cell
            :title="item.type == 1 ? $t('index.dailyRate') : $t('index.rate')"
            value-class="value_class"
            :border="false"
            :value="item.rate + '%'"
          />
          <van-cell
            :title="$t('invest.cycle')"
            value-class="value_class"
            :border="false"
            :value="
              item.day + (item.type == 3 ? $t('index.hour') : $t('index.day'))
            "
          />
          <van-cell
            :title="$t('invest.type')"
            value-class="value_class"
            :border="false"
            :value="$t('index.method' + item.type)"
          />
          <van-cell
            :title="$t('invest.financingAmount')"
            value-class="value_class"
            :border="false"
            :value="common.currency_symbol_basic() + item.max_touzi"
          />
        </van-cell-group>
      </div>
    </div>
    <div class="block_div iframe">
      <iframe
        :src="src"
        width="100%"
        height="400px"
      />
    </div>
    <div class="block_div item_detail">
      <div class="title">
        {{ $t("invest.detail") }}
      </div>
      <div
        class="content"
        v-html="item.content"
      />
    </div>
    <div
      v-if="item.status === 2"
      class="basic_btn btn"
      @click="showPopup = true"
    >
      {{ $t("invest.investNow") }}
    </div>
    <van-popup
      v-model="showPopup"
      position="bottom"
      closeable
      close-icon-position="top-left"
    >
      <div class="item_info popup_info">
        <div class="title">
          {{ $t("invest.orderInfo") }}
        </div>
        <div class="detail">
          <van-cell-group :border="false">
            <van-cell
              :title="item.type == 1 ? $t('index.dailyRate') : $t('index.rate')"
              value-class="value_class"
              :border="false"
              :value="item.rate + '%'"
            />
            <van-cell
              :title="$t('invest.cycle')"
              value-class="value_class"
              :border="false"
              :value="
                item.day + (item.type == 3 ? $t('index.hour') : $t('index.day'))
              "
            />
            <van-cell
              :title="$t('invest.amount')"
              value-class="value_class"
              :border="false"
              :value="
                common.currency_symbol_basic() +
                  common.precision_basic(item.min)
              "
            />
            <van-cell
              :title="$t('invest.type')"
              value-class="value_class"
              :border="false"
              :value="$t('index.method' + item.type)"
            />
            <van-cell
              v-show="user.login"
              :title="$t('invest.paymentType')"
              value-class="value_class"
              :border="false"
              :value="
                $t('user.fundingAccount') +
                  ' (' +
                  common.currency_symbol_basic() +
                  common.precision_basic(user.balance) +
                  ')'
              "
            />
            <van-cell
              :title="$t('invest.shares')"
              :border="false"
            >
              <van-stepper
                :value="shares"
                integer
                @change="sharesChange"
              />
            </van-cell>
          </van-cell-group>
        </div>
        <div class="flex_center invest_detail_wrap">
          <div>
            {{ $t("invest.income") }}
            <span
              class="detail_money"
            >{{ common.currency_symbol_basic() }}{{ income }}
            </span>
          </div>
          <div
            class="basic_btn sbtn"
            @click="submit"
          >
            {{ $t("invest.submit") }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import moment from "moment";
import Fetch from "../../utils/fetch";
import { Icon, Popup, Field, Cell, Image, Stepper, CellGroup } from "vant";
Vue.use(Icon)
  .use(Popup)
  .use(Field)
  .use(Cell)
  .use(Image)
  .use(Stepper)
  .use(CellGroup);
export default {
  name: "",
  components: {},
  data() {
    return {
      data: [],
      item: {
        min: 0,
        type: 1,
        rate: 0,
        day: 0,
        status: 1,
      },
      shares: 1, // 投资份数
      user: [],
      src: "../html/page1.html",
      money: "",
      income: 0,
      showPopup: false,
      loading: false,
      upColor: "#ec0000",
      upBorderColor: "#8A0000",
      downColor: "#00da3c",
      downBorderColor: "#008F28",
      data0: [],
      data1: [],
      startForm:
        "YYYY" +
        this.$t("hot.year") +
        "MM" +
        this.$t("hot.month") +
        "DD" +
        this.$t("hot.day"),
      countFormat: "DDD HHH mmm sss",
    };
  },
  created() {
    if (window.plus) {
      window.plus.navigator.setStatusBarBackground("#0F6EFF");
      window.plus.navigator.setStatusBarStyle("light");
    }
    this.$parent.footer("user", false);
  },
  mounted() {
    this.start();
  },
  methods: {
    start() {
      Fetch("/index/item_detail", {
        id: this.$router.history.current.params.code,
      }).then((r) => {
        if (r.data.item.baokuan === 2) {
          this.item = r.data.item;
          if (this.item.end_time * 1000 <= moment().valueOf()) {
            // 产品已结束，为普通产品 status 为1
            this.item.status = 1;
          } else if (
            this.item.start_time * 1000 <
            moment().valueOf() <
            this.item.end_time * 1000
          ) {
            // 产品一开始还未结束 为爆款 status 为 2
            this.item.status = 2;
            this.item.distanceEnd =
              this.item.end_time * 1000 - moment().valueOf();
          } else {
            this.item.status = 3; // 新品
          }
          this.user = r.data.user;
          if (!this.user.login) {
            this.$dialog
              .alert({
                closeOnClickOverlay: true,
                showConfirmButton: false,
                showCancelButton: false,
                message: this.$t("invest.loginFirst"),
              })
              .then(() => {
                this.$router.push({
                  path: "/login",
                });
              })
              .catch(() => {
                this.$router.push({
                  path: "/login",
                });
              });
            return false;
          }
          if (!this.user.mid || this.user.mid < this.item.vip) {
            this.$dialog
              .alert({
                closeOnClickOverlay: true,
                showConfirmButton: false,
                showCancelButton: false,
                message:
                  "The VIP level must reach " +
                  this.item.vip_name +
                  " before you can invest in this project",
              })
              .then(() => {
                this.$router.push({
                  path: "/invest",
                });
              })
              .catch(() => {
                this.$router.push({
                  path: "/invest",
                });
              });
            return false;
          }
          this.change();
          this.data0 = this.splitData(this.item.k_data);
        }
      });
    },
    change() {
      if (this.item.type == 1) {
        this.income = this.common.precision_basic(
          (this.item.min * this.item.rate * this.item.day) / 100
        );
      } else {
        this.income = this.common.precision_basic(
          (this.item.min * this.item.rate) / 100
        );
      }
    },
    recharge() {
      this.$dialog
        .alert({
          closeOnClickOverlay: true,
          showConfirmButton: true,
          showCancelButton: true,
          message: this.$t("user.rechargeTips"),
        })
        .then(() => {
          this.$router.push({
            path: "/service/3",
          });
        })
        .catch(() => {
          this.$router.push({
            path: "/service/3",
          });
        });
    },
    sharesChange(shares) {
      this.shares = shares;
    },
    submit() {
      if (this.loading) return false;
      if (!this.user.login) {
        this.$toast(this.$t("invest.loginFirst"));
        return false;
      }
      if (this.user.balance - this.item.min < 0) {
        this.$toast(this.$t("invest.moneyNotEnough"));
        return false;
      }
      if (this.user.limit_today) {
        this.$toast(this.$t("invest.investNumEmpty"));
        return false;
      }
      this.loading = true;
      // shares: 1, // 投资份数
      Fetch("/user/invest", {
        id: this.item.id,
        shares: this.shares,
      }).then(() => {
        this.$router.replace("/invest/record");
      });
    },
    splitData(rawData) {
      const categoryData = [];
      const values = [];
      for (var i = 0; i < rawData.length; i++) {
        var arr = rawData[i].split(",");
        categoryData.push(arr.splice(0, 1)[0]);
        values.push(arr);
      }
      return {
        categoryData: categoryData,
        values: values,
      };
    },
    calculateMA(dayCount) {
      var result = [];
      for (var i = 0, len = this.data0.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += +this.data0.values[i - j][1];
        }
        result.push(sum / dayCount);
      }
      return result;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-popup--bottom {
  right: 0;
  margin: 0 auto;
  max-width: 750px;
}

.basic_wrap {
  margin-bottom: 60px;
}

.red_top_bg {
  background: #0f6eff;
  position: fixed;
  z-index: 10;
  box-shadow: unset;

  .back_left {
    background: url(../img/common/back.png) no-repeat center center;
    width: 30px;
    height: 22px;
  }

  .big_tit {
    color: #ffffff;
    left: 55px;
  }
}

.item_info_bg {
  background: #0f6eff;
  width: 100%;
  height: 168px;
  border-radius: 0 0 30px 30px;
}

.progress {
  margin: 10px 16px;
}

.item_title {
  margin-top: 54px;
  line-height: 2;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
}

.logo {
  margin-bottom: 10px;

  img {
    width: 100%;
  }
}

.item_info {
  margin-bottom: 10px;

  .img {
    img {
      width: 100%;
    }
  }

  .pos-relative {
    position: relative;

    .hot-tag {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 1000;
    }
  }
  .detail {
    padding: 10px 0;
    line-height: 2;
	.detail-header{
		padding: 0 15px;
	}
    .value_class {
      font-weight: bold;
      color: #3cb371;
    }
  }
}

.info1 {
  margin-top: -116px;
}

.popup_info {
  .title {
    text-align: center;
    padding: 16px;
  }

  .invest_amount {
    color: #999;
    padding: 15px 20px 0 0;
    font-size: 14px;
  }

  .invest_detail_wrap {
    width: 100%;
    margin: 0;
    justify-content: space-between;
    padding: 15px;
    border-top: 1px solid #f7f7f7;

    .detail_money {
      color: #ff0000;
      font-weight: bold;
      font-size: 16px;
      margin-left: 5px;
    }

    .sbtn {
      width: unset;
      height: unset;
      line-height: unset;
      padding: 5px 15px;
    }
  }
}

.item_detail {
  margin-bottom: 20px;

  .title {
    padding: 15px 0 10px 15px;
    font-size: 16px;
    border-bottom: 1px solid #f7f7f7;
  }

  .content {
    padding: 10px 15px 15px 15px;
    line-height: 2;
  }
}

.btn {
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 10px;
  max-width: 400px;
  width: 80%;
  text-align: center;
}

/deep/ .van-cell {
  font-size: unset;
  padding: 5px 16px;
}
</style>
